<template>
  <div>
    <!-- <div>top</div> -->
    <div class="body-table">
      <!-- left -->
      <div class="body-table-body">
        <div class="body-table-body-header">
          <a-button @click="showTableSource" style="margin-left: 5px;">
            <i class="designer-icon margin-right-sm">&#xe606;</i>
            查看源码
          </a-button>
          <a-button class="copy-json-btn" style="margin-left: 5px;">
            <i class="designer-icon margin-right-sm">&#xe63e;</i>
            复制Vue
          </a-button>
          <a-button @click="exports" icon="download" style="margin-left: 5px;">
            导出Vue
          </a-button>
          <a-button icon="reload" style="margin-left: 5px;" @click="reset">
            重置
          </a-button>
          <a-button v-if="designVis" type="primary" icon="save" style="margin-right: 5px;float:right;" @click="save">
            保存
          </a-button>
        </div>
        <div class="body-table-body-main">
          <table-content
            :searchItems="searchItems"
            :tableOptions="tableOptions"
            :toolsArray="toolsArray"
          />
        </div>
      </div>
      <!-- right -->
      <div class="body-table-config">
        <a-tabs
          size="default"
          :tabBarStyle="{
            height: '48px',
            border: '1px solid #DCDCDC',
            borderLeft: 'none',
            padding: '4px',
            backgroundColor: '#fafafa',
            textAlign: 'center',
          }"
        >
          <a-tab-pane key="1">
            <span slot="tab">
              Table列表
            </span>
            <div class="attr-config">
              <table-config
                ref="tableConfig"
                @tableOptionsChange="tableOptionsChange"
                @toolsChange="toolsChange"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">
              搜索条
            </span>
            <div class="attr-config">
              <search-config ref="searchConfig" :searchItems="searchItems" @itemsChange="itemsChange" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <!--源码-->
    <table-drawer ref="tableDrawer" />
  </div>
</template>
<script>
import SearchConfig from './searchConfig.vue'
import TableContent from './tableContent.vue'
import TableConfig from './tableConfig.vue'
import { deepClone } from '@/utils/tools.js'
import TableDrawer from './tableDrawer.vue'
import { saveAs } from 'file-saver'
import { makeUpHtml } from './util/html'
import { makeUpJs } from './util/js'
import { makeUpCss } from './util/css'
import beautifier from 'beautifier'
import { beautifierConf, buildScript, buildStyle } from './util/index'
import ClipboardJS from 'clipboard'
export default {
  components: { TableContent, SearchConfig, TableConfig, TableDrawer },
  data() {
    return {
      searchItems: [],
      tableOptions: {},
      toolsArray: [],
      designVis: false
    }
  },
  created() {
    const _this = this

    const clipboard = new ClipboardJS('.copy-json-btn', {
      text: trigger => {
        _this.$notification.open({
          title: '成功',
          message: '代码已复制到剪切板，可粘贴。',
          type: 'success'
        })
        return _this.getTemplate()
      }
    })
    clipboard.on('error', e => {
      this.$message.error('代码复制失败')
    })
  },
  mounted() {

  },
  methods: {
    save() {
      this.$emit('save', {
        searchItems: this.searchItems,
        tableOptions: this.tableOptions,
        toolsArray: this.toolsArray
      })
    },
    /* 手动初始化数据 */
    init(data) {
      const { tableOptions, searchItems, toolsArray } = data
      // this.tableOptions = deepClone(tableOptions)
      this.$refs.tableConfig.init(tableOptions)
      this.$refs.tableConfig.initTools(toolsArray)

      // this.$refs.searchConfig.initSearch(searchItems)
      this.searchItems = deepClone(searchItems)
      this.designVis = true
    },
    /* 下载vue */
    exports() {
      const value = `${+new Date()}.vue`
      const codeStr = this.getTemplate()
      const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' })
      saveAs(blob, value)
    },
    getTemplate() {
      let htmlCode = makeUpHtml(this.searchItems, this.tableOptions, this.toolsArray)
      htmlCode = beautifier.html(htmlCode, beautifierConf.html)

      let jsCode = makeUpJs(this.searchItems, this.tableOptions, this.toolsArray)
      jsCode = beautifier.js(jsCode, beautifierConf.js)

      let cssCode = makeUpCss(this.searchItems, this.tableOptions, this.toolsArray)
      cssCode = beautifier.js(cssCode, beautifierConf.js)

      return `${htmlCode}\n${buildScript(jsCode)}\n${buildStyle(cssCode)}`
    },

    showTableSource() {
      this.$refs.tableDrawer.open(this.searchItems, this.tableOptions, this.toolsArray)
    },
    /* 搜索 */
    itemsChange(items) {
      // this.searchItems = JSON.parse(JSON.stringify(items))
      this.searchItems = deepClone(items)
    },
    /* table */
    tableOptionsChange(options) {
      // console.log('options', options)
      // this.tableOptions = JSON.parse(JSON.stringify(options))
      this.tableOptions = deepClone(options)
    },
    /* tools */
    toolsChange(toolsArray) {
      this.toolsArray = deepClone(toolsArray)
    },
    reset() {
      this.$message.warn('没做，手动刷新吧~')
      // this.$refs.tableConfig.reset()
      // this.$refs.searchConfig.reset()
    }
  }
}
</script>
<style lang="less" scoped>
.body-table {
  display: flex;
  .body-table-body {
    flex: 1;
    .body-table-body-header {
      height: 48px;
      border: 1px solid #dcdcdc;
      padding: 7px;
      background-color: #fafafa;
    }
    .body-table-body-main {
      height: 100vh;
      background-color: #ffffff;
    }
  }
  .body-table-config {
    width: 320px;
  }
}
.attr-config {
  height: 100vh;
  background-color: #ffffff;
  margin-top: -16px;
}
</style>
